(function() {
    Nokia.Tabs = Nokia.Widget.extend({
        initialize: function(options) {
            var instance = this;

			var defaults = {
				animation: false,
				itemWidth: '120px',
				maximize: true,
				selected: 0,
				scrollDelay: 250
			};

            instance.options = jQuery.extend(defaults, options);

            instance.element = jQuery( instance.options.element );

            instance._super.apply(instance, [instance.options]);

            instance.registerData("tabs");

            instance._create();

            instance._attachEvents();

			instance.registerVibrationOn([ ]);
			instance.fireCallback('create');
        },

        _attachEvents: function() {
        	var instance = this;
        	var options = instance.options;

        	jQuery(window).bind('resize', function() {
        		instance.listContainer.scrollTo(0, options.scrollDelay, function() {
        			instance._updateExtraTabs();
        		});

        	});
        },

		_create: function() {
			var instance = this;
			var element = instance.element;
			var options = instance.options;
			var Styles = instance.Styles;

			var list = jQuery('ul', element);
			var items = list.find('li');

			instance.list = list;

			if (options.maximize) {
				Nokia.util.maximize(element);
			}

			Nokia.util.addClass(element[0], Styles.tabs);

			var listWrapper = Nokia.dom.parseHTML('<div class="' + Styles.tabsListWrapper + '"></div>');
			Nokia.dom.wrap(listWrapper, list);

			instance.listWrapper = listWrapper;

			var listContainer = Nokia.dom.parseHTML('<div class="' + Styles.tabsListContainer + '"></div>');
			Nokia.dom.wrap(listContainer, listWrapper);

			var dropDownWrapper = Nokia.dom.parseHTML('<a href="javascript:void(0);" class="' + [Styles.tabsDropDownWrapper, Styles.tabsItem].join(' ') + '"></a>');
			Nokia.dom.append('body', dropDownWrapper);

			instance.dropDownWrapper = dropDownWrapper;

			var dropDown = Nokia.dom.parseHTML('<a href="javascript:void(0);" class="' + [Styles.tabsDropDown, Styles.uiStateDefault].join(' ') + '"></a>');
			Nokia.dom.append(dropDownWrapper, dropDown);

			Nokia.util.applyRoundedCorners(dropDown, '', 'top');

			dropDown.bind('click', function() {
				Nokia.util.show(instance.extraTabsContainer[0]);
			});

			Nokia.util.bindEnter(dropDown, function() {
				Nokia.util.show(instance.extraTabsContainer[0]);
			});

			instance.dropDown = dropDown;

			var dropDownIcon = Nokia.dom.parseHTML('<div class="' + [Styles.tabsArrow, Styles.tabsArrowRight].join(' ') + '"></div>');
			Nokia.dom.append(dropDown, dropDownIcon);

			instance.listContainer = listContainer;

			instance.contents = jQuery([]);
			instance.links = jQuery([]);

			Nokia.util.addClass( list[0], [Styles.uiClearfix].join(' ') );

			items.each(function(i, li) {
				Nokia.util.addClass( li, [Styles.tabsItem].join(' ') );

				var item = jQuery(li);
				var link = item.find('a:first');

				Nokia.util.addClass( link[0], [Styles.uiStateDefault].join(' ') );

				instance.links = instance.links.add(link);

				Nokia.util.applyRoundedCorners(link, '', 'top');

				link.bind('click.tabs', function(event) {
					instance.select(instance.links.index(link), event);
				});

				Nokia.util.bindEnter(link, function() {
					instance.select(instance.links.index(link), event);
				});

				link.bind('focus.tabs', function() {
					var active = jQuery(instance.contents[i]).is(':visible');

					if (active) {
						Nokia.util.removeClass( link[0], [Styles.uiStateActive].join(' ') );
					}

					Nokia.util.addClass( link[0], [Styles.uiStateHover].join(' ') );

					var selectedBorder = item.find('> .' + Styles.borderTop);
					Nokia.util.addClass(selectedBorder[0], Styles.borderStateHover);
				});

				link.bind('blur.tabs', function() {
					var active = jQuery(instance.contents[i]).is(':visible');

					if (active) {
						Nokia.util.addClass( link[0], [Styles.uiStateActive].join(' ') );
					}

					Nokia.util.removeClass( link[0], [Styles.uiStateHover].join(' ') );

					var selectedBorder = item.find('> .' + Styles.borderTop);
					Nokia.util.removeClass(selectedBorder[0], Styles.borderStateHover);
				});

				link.hover(function() {
					jQuery(this).trigger('focus.tabs');
				}, function() {
					jQuery(this).trigger('blur.tabs');
				});

				var selector = link.attr('href');
				var content = jQuery(selector, element);

				instance.contents = instance.contents.add(content);

				Nokia.util.addClass( content[0], [Styles.tabsContent, Styles.uiWidgetContent, Styles.uiClearfix].join(' ') );

				item.width(options.itemWidth);
			});

			instance._createExtraTabsContainer();

			instance.select(options.selected);
		},

		_createExtraTabsContainer: function() {
			var instance = this;
			var Styles = instance.Styles;

			var extraTabsContainer = Nokia.dom.parseHTML('<div class="' + [Styles.tabsItem, Styles.tabsExtraTabsContainer, Styles.uiStateDefault].join(' ') + '"></div>');
			Nokia.dom.append('body', extraTabsContainer);

			instance.extraTabsContainer = extraTabsContainer;
		},

		_updateExtraTabs: function() {
			var instance = this;
			var Styles = instance.Styles;
			var element = instance.element;

			var items = instance.list.find('li');

			instance.isOut = false;

			Nokia.util.hide(instance.extraTabsContainer[0]);
			Nokia.util.hide(instance.dropDownWrapper[0]);

			instance.extraTabsContainer[0].innerHTML = '';

			var elOffset = element.offset();
			var elOutWidth = element.outerWidth();
			var counter = 0;

			var wrapperScrollLeft = instance.listContainer.scrollLeft();

			jQuery.each(items, function(i, item) {
				var jItem = jQuery(item);

				var itemLeft = jItem.offset().left;
				var itemWidth = jItem.outerWidth();

				if ( itemLeft > elOffset.left + elOutWidth || itemLeft + wrapperScrollLeft < wrapperScrollLeft + elOffset.left) {
					var label = jItem.find('a:first');
					var outTab = Nokia.dom.parseHTML('<a href="javascript:void(0);" class="' + Styles.tabsOutTabItem + '">' + label[0].innerHTML + '</a>');

					Nokia.dom.append(instance.extraTabsContainer, outTab);

					outTab.bind('click', function(e) {
						instance.select(i, e);

						Nokia.util.hide(instance.extraTabsContainer[0]);
					});

					Nokia.util.bindEnter(outTab, function() {
						instance.select(i, e);

						Nokia.util.hide(instance.extraTabsContainer[0]);
					});

					counter++;
				}
			});

			if (counter > 0) {
				instance.isOut = true;

				Nokia.util.show(instance.dropDownWrapper[0]);
			}
		},

		_updateScroll: function(callback) {
			var instance = this;
			var options = instance.options;

			instance.listContainer.scrollTo(instance.selectedItem, options.scrollDelay, function() {
				if (callback) {
					callback.apply(instance, []);
				}
			});
		},

		select: function(tab, event) {
			var instance = this;
			var options = instance.options;
			var element = instance.element;
			var Styles = instance.Styles;
			var selected;

			jQuery.each(instance.contents, function(i, content) {
				Nokia.util.hide(content);
			});

			if (typeof tab === 'number') {
				selected = jQuery(instance.contents[tab]);
			} else if (typeof tab === 'object' && jQuery.inArray(jQuery(tab).get(0), instance.contents) > -1) {
				selected = jQuery(tab);
			} else {
				selected = jQuery(instance.contents[0]);
			}

			if (instance.selectedItem) {
				Nokia.util.removeClass(instance.selectedItem[0], Styles.tabsItemSelected);

				var selectedLink = instance.selectedItem.find('> a');
				Nokia.util.removeClass(selectedLink[0], Styles.uiStateActive);

				var selectedBorder = instance.selectedItem.find('> .' + Styles.borderTop);
				Nokia.util.removeClass(selectedBorder[0], Styles.borderStateActive);
			}

			var selectedLink = jQuery(instance.links[instance.contents.index(selected)]);
			Nokia.util.addClass(selectedLink[0], Styles.uiStateActive);

			var selectedItem = selectedLink.parents('.' + Styles.tabsItem);
			Nokia.util.addClass(selectedItem[0], Styles.tabsItemSelected);

			var selectedBorder = selectedItem.find('> .' + Styles.borderTop);
			Nokia.util.addClass(selectedBorder[0], Styles.borderStateActive);

			instance.selectedItem = selectedItem;

			if (instance.isOut) {
				instance._updateScroll(function() {
					instance._updateExtraTabs();
				});
			} else {
				instance._updateExtraTabs();
			}

			if (options.animation) {
				Nokia.util.fadeIn(selected);
			}
			else {
				Nokia.util.show(selected[0]);
			}

			instance.fireCallback('select', event, tab);
		},

		Styles: {
			borderStateActive: 'nokia-border-state-active',
			borderStateDefault: 'nokia-border-state-default',
			borderStateHover: 'nokia-border-state-hover',
			borderTop: 'nokia-border-top',
			tabs: 'nokia-tabs',
			tabsItem: 'nokia-tabs-item',
			tabsItemSelected: 'nokia-tabs-item-selected',
			tabsContent: 'nokia-tabs-content',
			tabsListContainer: 'nokia-tabs-list-container',
			tabsListWrapper: 'nokia-tabs-list-wrapper',
			tabsDropDown: 'nokia-tabs-dropdown',
			tabsDropDownWrapper: 'nokia-tabs-dropdown-wrapper',
			tabsExtraTabsContainer: 'nokia-tabs-extra-tabs',
			tabsOutTabItem: 'nokia-tabs-outtab-item',
			tabsArrow: 'nokia-tabs-arrow',
			tabsArrowRight: 'nokia-tabs-arrow-right',
			uiClearfix: 'ui-helper-clearfix',
			uiStateDefault: 'ui-state-default',
			uiStateActive: 'ui-state-active',
			uiStateHover: 'ui-state-hover',
			uiIcon: 'ui-icon',
			uiIconTriagleW: 'ui-icon-triangle-1-w',
			uiIconTriagleE: 'ui-icon-triangle-1-e',
			uiIconTriagleS: 'ui-icon-triangle-1-s',
			uiStateDisabled: 'ui-state-disabled',
			uiWidgetContent: 'ui-widget-content'
		}
    });
})();